<!DOCTYPE html>
<html>
<head>
<title>focus_user.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../statics/js/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="../layui/layui/css/layui.css" />
<style type="text/css">
	.layui-table-main	.layui-table-cell {
    height: 58px;
    line-height: 58px;
    padding: 0 15px;
    position: relative;
    box-sizing: border-box;
}

</style>
<script type="text/javascript" src="../../layui/layui.js"></script>
</head>
<body>
	<div class="container layui-form">
		<div class="content-search">
			<label class="layui-form-label">查询</label>
			<div class="layui-input-inline" style="width:12%;">
				<input type="text" name="title" lay-verify="title"
					autocomplete="off" id="wx_nickname" placeholder="请输入昵称" class="layui-input">
			</div>
			<div class="layui-inline">
				<button class="layui-btn" data-type="reload">查询</button>
			</div>
		</div>
		<div class="table-listm roll-x">
			<table id="focus" lay-filter="focus">
			</table>
		</div>
		<div id="table-pages" style="text-align:center"></div>
	</div>
</body>
<script type="text/javascript">
	layui.use(
				[ 'jquery', 'laydate', 'form', 'layer', 'laypage', 'table' ],
				function() {
					var $ = layui.jquery, 
					laydate = layui.laydate,
					layer = layui.layer, 
					table = layui.table, 
					laypage = layui.laypage;
					
							table.render({
							elem : '#focus',
							height : 'full-50',
							id : 'channel_user_table_id',
							 url : '../../web/focus', 
							/* data:{
								
							}, */
							page: true ,
							loading : true,
							text : {
								none : '暂无相关数据'
							},
							cellMinWidth : 80,
							cols : [ [/* {type: 'numbers', title: '序号', width: '30'} */
							, {
								field : 'id',
								title : 'ID'
							},{
								field : 'wx_nickname',
								title : '微信昵称',
							},{
								field : 'wx_avatar_url',
								title : '微信头像',
								templet:function (d) { 
										return "<img  src="+d.wx_avatar_url+"  />";
								}
							},{
								field : 'wxOpenId',
								title : '唯一标识',
							},{
								field : 'createtime',
								title : '关注时间' ,
								templet:function(d){
									var newDate = new Date(d.createtime).toLocaleString();
									return newDate;
								} 
							}
							 ] ],
							done : function(res) {

							},
							request: {
									pageName: 'page',
									limitName: 'size'
								},
								limit: 10,
								limits: [10, 20, 30, 40, 50]
								
						});
			var active =
              {
                  reload: function () {
                      var wx_nickname = $('#wx_nickname').val();//获取输入框的值
                      if(wx_nickname ==''){
                             layer.msg("请输入昵称", {icon: 5,time:1000});return ;
                      }
                      //执行重载
                      table.reload('channel_user_table_id',
                          {
                                where: { wx_nickname: wx_nickname}//这里传参  向后台
		                        , method: 'get'
                        });
                  }
              };

 			//这个是用于创建点击事件的实例
            $('.content-search  .layui-btn').on('click', function ()
            {
                var type = $(this).data('type'); 
                active[type] ? active[type].call(this) : '';
            });
						
					
			});
			
			
</script>
</html>
